<link rel="stylesheet" href="assets/store/css/goods.css?v=<?= $version ?>">
<div class="row-content am-cf">
    <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <form id="my-form" class="am-form tpl-form-line-form" method="post">
                    <div class="widget-body">
                        <fieldset>
                            <div class="widget-head am-cf">
                                <div class="widget-title am-fl">基本信息</div>
                            </div>
                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">预约ID </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <input type="hidden" name="model[id]" value="<?= $model['id'] ?>" >
                                    <input type="text" class="tpl-form-input" name="model[order_id]"
                                           value="<?= $model['order_id'] ?>" readonly>
                                </div>
                            </div>

                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label">客户信息</label>
                                <div class="am-u-sm-9 am-u-end">
                                    <input type="text" class="tpl-form-input" name="model[user_name]"
                                           value="<?= $model['user_name'] ?>" disabled>
                                </div>
                            </div>

                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label">订单信息</label>
                                <div class="am-u-sm-9 am-u-end">
                                    <input type="text" class="tpl-form-input" name="model[user_order_name]"
                                           value="<?= $model['user_order_name'] ?>" disabled>
                                </div>
                            </div>

                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">商品名称</label>
                                <div class="am-u-sm-9 am-u-end">
                                    <select id="nameSelect" name="model[user_goods_sku]" required
                                            data-am-selected="{searchBox: 1, btnSize: 'sm',
                                             placeholder:'请选择商品名称', maxHeight: 400}">
                                        <option value=""></option>
                                        <?php if (isset($order_goods_list)): foreach ($order_goods_list as $item): ?>
                                            <option value="<?= $item['goods_sku_id'] ?>"
                                                <?= $model['user_goods_sku'] == $item['goods_sku_id'] ? 'selected' : '' ?>>
                                                <?= $item['goods_name'] ?></option>
                                        <?php endforeach; endif; ?>
                                    </select>
                                </div>
                            </div>

                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">预约类型</label>
                                <div class="am-u-sm-9 am-u-end">
                                    <!-- <select id="selectType" name="model[status]" required
                                            data-am-selected="{searchBox: 1, btnSize: 'sm',
                                             placeholder:'请选择预约状态', maxHeight: 400}">
                                        <option value=""></option>
                                        <?php if (isset($type_list)): foreach ($type_list as $item): ?>
                                            <option value="<?= $item['type_id'] ?>"
                                                <?= $model['type_id'] == $item['type_id'] ? 'selected' : '' ?>>
                                                <?= $item['name'] ?></option>
                                        <?php endforeach; endif; ?>
                                    </select> -->
                                    <input id="selectType" type="text" class="tpl-form-input" name="model[type_id]"
                                           value="<?= $type_list['name'] ?>" readonly>
                                    <input id="selectType1" type="hidden" class="tpl-form-input" name="model[type_id]"
                                    value="<?= $type_list['type_id'] ?>" readonly>
                                </div>
                            </div>

                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">预约日期</label>
                                <div class="am-u-sm-9 am-u-end">
                                    <input id="date_id" type="text" name="model[appointment_date]"
                                           class="am-form-field"
                                           value="<?= date("Y-m-d", $model['appointment_date']) ?>"
                                           placeholder="请选择预约日期"
                                           data-am-datepicker>
                                </div>
                            </div>

                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">服务人员</label>
                                <div class="am-u-sm-9 am-u-end">
                                    <select id="select" name="model[service_id]" required
                                            data-am-selected="{searchBox: 1, btnSize: 'sm',
                                             placeholder:'请选择服务人员', maxHeight: 400}" onchange="change_server($(this).val())">
                                        <option value=""></option>
                                        <?php if (isset($service_list)): foreach ($service_list as $item): ?>
                                            <option value="<?= $item['user_id'] ?>"
                                                <?= $model['service_id'] == $item['user_id'] ? 'selected' : '' ?>>
                                                <?= $item['real_name'] ?></option>
                                        <?php endforeach; endif; ?>
                                    </select>
                                </div>
                            </div>
                            <script>
                                function change_server(server){
                                    var type = $("#selectType1").val();
                                    var date = $("#date_id").val();
                                    $.ajax({
                                        type : "POST",
                                        contentType: "application/json;charset=UTF-8",
                                        url : '/index.php?s=/store/appointment.order/get_time_list&type_id=' + type + '&server=' + server+ '&date=' + date,
                                        success:function(res){
                                            console.log(res)
                                            var str = '';
                                            for (let i = 0; i < res.length; i++) {
                                                if(res[i].target){
                                                    str += `<option value="${res[i].time_id}">${res[i].name} （${res[i].target}）</option>`
                                                }else{
                                                    str += `<option value="${res[i].time_id}" >${res[i].name}</option>`
                                                }

                                            }
                                            $('#yuyueTime')[0].innerHTML = str
                                        }
                                    })
                                }
                            </script>

                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">预约时间</label>
                                <div class="am-u-sm-9 am-u-end">
                                    <select id="yuyueTime" name="model[time_id][]" required
                                            multiple data-am-selected="{searchBox: 1, btnSize: 'sm',
                                             placeholder:'请选择预约时间', maxHeight: 400}">
                                        <option value=""></option>
                                        <?php if (isset($time_list)): foreach ($time_list as $item): ?>


                                            <option value="<?= $item['time_id'] ?>"
                                                <?= in_array($item['time_id'],$model['time_id']) ? 'selected' : '' ?>>
                                                <?= $item['name']?>
                                                <?= ($item['target']!='')? "（$item[target]）" : ''?>
                                            </option>


                                        <?php endforeach; endif; ?>
                                    </select>
                                </div>
                            </div>


                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">预约地址</label>
                                <div class="am-u-sm-9 am-u-end">
                                    <input type="text" class="tpl-form-input" name="model[address]"
                                           value="<?= $model['address'] ?>">
                                </div>
                            </div>

                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">预约状态</label>
                                <div class="am-u-sm-9 am-u-end">
                                    <select name="model[status]" required
                                            data-am-selected="{searchBox: 1, btnSize: 'sm',
                                             placeholder:'请选择预约状态', maxHeight: 400}">
                                        <option value=""></option>
                                        <?php if (isset($status_list)): foreach ($status_list as $item): ?>
                                            <option value="<?= $item['value'] ?>"
                                                <?= $model['status'] == $item['value'] ? 'selected' : '' ?>>
                                                <?= $item['name'] ?></option>
                                        <?php endforeach; endif; ?>
                                    </select>
                                </div>
                            </div>
                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require"> 客户电话 </label>
                                <div class="am-u-sm-9 am-u-md-6 am-u-lg-5 am-u-end">
                                    <input type="text" class="tpl-form-input" name="model[user_phone]"
                                           value="<?=$model['user_phone']?>" placeholder="请输入客户电话" required>
                                </div>
                            </div>

                            <div class="am-form-group" id="serve_time">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label"> 服务用时 </label>
                                <div class="am-u-sm-9 am-u-md-6 am-u-lg-5 am-u-end">
                                    <input type="text" class="tpl-form-input" name="model[use_time]"
                                           value="<?= $service_info['use_time'] ?>" placeholder="请输服务用时">
                                    <!-- <div class="help-block">
                                        <small>注：只有保洁类型的需要设置时间</small>
                                    </div> -->
                                </div>
                            </div>

                            <div class="am-form-group" id="serve_time">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label"> 服务数量 </label>
                                <div class="am-u-sm-9 am-u-md-6 am-u-lg-5 am-u-end">
                                    <input type="text" class="tpl-form-input" name="model[num]"
                                           value="<?= $model['num'] ?>" placeholder="请输服务用时">
                                    <!-- <div class="help-block">
                                        <small>注：只有保洁类型的需要设置时间</small>
                                    </div> -->
                                </div>
                            </div>

                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label"> 备注 </label>
                                <div class="am-u-sm-9 am-u-md-6 am-u-lg-5 am-u-end" >
                                    <input type="text" class="tpl-form-input" name="model[order_desc]"
                                           value="<?= $model['order_desc'] ?>" placeholder="备注信息" >
                                    <!-- <div class="help-block">
                                        <small>注：只有保洁类型的需要设置时间</small>
                                    </div> -->
                                </div>
                            </div>

                            <!-- 表单提交按钮 -->
                            <div class="am-form-group">
                                <div class="am-u-sm-9 am-u-sm-push-3 am-margin-top-lg">
                                    <button type="submit" class="j-submit am-btn am-btn-secondary am-btn-sm">修改
                                    </button>
                                </div>
                            </div>

                        </fieldset>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="assets/common/js/vue.min.js"></script>
<script src="assets/common/js/ddsort.js"></script>
<script>    
    if($('#selectType1').val() == 7){
        $("#serve_time").show();
    }
    else{
        $("#serve_time").hide();
    }
    $(function () {
        let condtion = $('#selectType1').val()

        //选择商品名称，获取预约状态
        $('#nameSelect').on('change',function(){
            // console.log($(this).val(),'22222')
            // if()
            getNameStatus($(this).val())
        })

        //获取商品预约状态
        function getNameStatus(id){
            $.ajax({
                type : "POST",
                contentType: "application/json;charset=UTF-8",
                url : '/index.php?s=/store/data.user/get_goods_type&goods_id=' + id,
                success:function(res){
                    console.log('111111',res)
                    // var str = '';
                    // for (let i = 0; i < res.length; i++) {
                    //     str += `<option value="${res[i].type_id}">${res[i].name}</option>`
                    // }
                    $('#selectType').val(res.name);
                    $('#selectType1').val(res.type_id);
                }
            })
        }

        // getServiceName($('#selectType').val(),$('#date_id').val(),$('#yuyueTime').val())
        //选择预约类型
        $('#selectType').on('change',function(){
            if($('#date_id').val() != ''/* && $('#yuyueTime').val() != ''*/){
                getServiceName($('#selectType1').val(),$('#date_id').val()/*,$('#yuyueTime').val()*/)
                getTimeList($('#selectType1').val(),$('#date_id').val())
            }
        })
        //选择预约日期
        $('#date_id').on('change',function(){
            // console.log($(this).val())
            if($('#selectType').val() != ''/* && $('#yuyueTime').val() != ''*/){
                getServiceName($('#selectType1').val(),$(this).val()/*,$('#yuyueTime').val()*/)
                getTimeList($('#selectType1').val(),$(this).val())
            }
        });
        /*//选择预约时间
        $('#yuyueTime').on('change',function(){
            // console.log($(this).val())
            if($('#selectType').val() != '' && $('#date_id').val() != ''){
                getServiceName($('#selectType1').val(),$('#date_id').val(),$(this).val())
            }
        });*/

        //获取服务人员
        function getServiceName(type_id,date_id/*,time_id*/){
            $.ajax({
                type : "POST",
                contentType: "application/json;charset=UTF-8",
                url : '/index.php?s=/store/data.user/get_server_man&type_id='+type_id+'&date_id='+date_id+'',//&time_id=${time_id}
                success:function(res){
                    //console.log('111111',res)
                    var str = '';
                    str = '<option value=""></option>';
                        for (let i = 0; i < res.length; i++) {
                            str += `<option value="${res[i].user_id}">${res[i].real_name}</option>`
                        }
                    $('#select')[0].innerHTML = str;
                }
            })
        }

        //获取时间列表
        function getTimeList(type,date_id) {
            $.ajax({
                type : "POST",
                contentType: "application/json;charset=UTF-8",
                url : '/index.php?s=/store/data.user/get_time_list&type_id=' + type + '&date_id=' + date_id,
                success:function(res){
                    // console.log(res)
                    var str = '';
                    for (let i = 0; i < res.length; i++) {
                        str += `<option value="${res[i].time_id}">${res[i].name}</option>`
                    }
                    $('#yuyueTime')[0].innerHTML = str
                }
            })
        }
        /**
         * 表单验证提交
         * @type {*}
         */
        $('#my-form').superForm();

    });
</script>
